<body></body>

<script>
  const render = (vnode, container) => {
    // 1、创建元素
    const el = document.createElement(vnode.type)
    // 2、绑定事件
    for (const key in vnode.props) {
      if (/^on/.test(key)) {
        el.addEventListener(
          key.substr(2).toLowerCase(), //事件名称
          vnode.props[key] //事件处理函数
        )
      }
    }
    // 3、处理children
    if (typeof vnode.children === 'string') {
      el.appendChild(document.createTextNode(vnode.children))
    } else if (vnode.children) {
      vnode.children.forEach((child) => render(child, el))
    }
    container.appendChild(el)
  }
  // vnode:虚拟 DOM 对象。
  // container:一个真实 DOM 元素，作为挂载点，渲染器会把虚拟 DOM 渲染到该挂载点下。
  render(
    {
      type: 'h1',
      props: {
        class: 'is-calss',
        onClick: () => {
          console.log(123)
        },
      },
      children: [
        {
          type: 'i',
          children: 'i标签',
        },
      ],
    },
    document.body
  )
</script>
